vue+element |
您所在的位置：网站首页 › element ui placeholder颜色 › vue+element |
vue+element
|
一.使用图形化界面，创建vue项目
vue ui(在根目录下，打开cmd,启动图形化界面)
安装好了
添加axios依赖
添加好了
二.创建Git仓库，连接并上传刚刚创建的项目
查看状态git status，发现有很多文件没有加入暂存区，
然后将这些文件加入暂存区，git add .
与远程仓库建立连接，然后将项目推送到仓库
这样，创建的项目就与远程仓库建立连接并推送成功了
三.用idea打开刚刚的项目
创建分支之后，去启动项目
修改
一开始这样：
修改后：
login.vue文件建好之后，我们要在index.js文件当中，配置好login.vue的路 由
首先我们去设置全局的css样式
然后将他引入到main.js这个文件中 这个文件就是你后续需要用到什么依赖啊啥的，就要引入到这个文件中
然后页面就显示了
在assets这个包下面建一个css目录，再建一个 最终登录的界面效果
登录
取消
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: 'Login',
data: function () {
return {
msg: 'zsf'
}
}
}
.login_container {
//background-color: #d4edda;
background-color: powderblue;
background-image: linear-gradient(to right,powderblue,deepskyblue);
height: 100%;
}
.login_box{
width: 450px;
height: 450px;
//background-color: antiquewhite;
background-color: white;
border-radius: 15%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0 0 10px powderblue;/*加阴影*/
.tp_box{
position: fixed;
left: 50%;
transform: translate(-50%);
border-radius: 50%;/*圆角*/
background-color:powderblue;
width: 120px;
height: 120px;
padding: 10px;
box-shadow: 0 5px 20px deepskyblue;/*加阴影*/
img{
width: 100%;
height: 100%;
border-radius: 50%;
}
}
}
.btns{
display: flex;
justify-content: flex-end;
}
.login_form{
position: absolute;
left: 50%;
transform: translate(-50%);
bottom: 60px;
width: 90%;
padding: 0px 20px;
/*就算你要撑起来，你也只能往里面撑起来*/
box-sizing: border-box;
}
另一个样式
登录
取消
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: 'Login',
data () {
return {
loginForm: {
username: '',
password: ''
},
loginFormRules: {
username: [
/* blur:失去焦点的时候触发 */
{
required: true,
message: '请输入用户名',
trigger: 'blur'
},
{
min: 6,
max: 9,
message: '长度在 6 到 9 个字符',
trigger: 'blur'
}
],
password: [
/* blur:失去焦点的时候触发 */
{
required: true,
message: '请输入密码',
trigger: 'blur'
},
{
min: 6,
max: 9,
message: '长度在 6 到 9 个字符',
trigger: 'blur'
}
]
}
}
},
methods: {
resetLoginForm () {
console.log(this)
this.$refs.loginFormRef.resetFields()
}
}
}
.login_container {
//background-color: #d4edda;
background-color: powderblue;
//background-image: linear-gradient(to right,powderblue,deepskyblue);
background-image: linear-gradient(to right, powderblue, pink, plum);
height: 100%;
}
.login_box {
width: 450px;
height: 450px;
//background-color: antiquewhite;
background-color: white;
border-radius: 15%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 10px powderblue; /*加阴影*/
.tp_box {
position: fixed;
left: 50%;
transform: translate(-50%);
border-radius: 50%; /*圆角*/
background-color: powderblue;
width: 120px;
height: 120px;
padding: 10px;
box-shadow: 0 5px 20px deepskyblue; /*加阴影*/
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
}
.btns {
display: flex;
justify-content: flex-end;
}
.login_form {
position: absolute;
left: 50%;
transform: translate(-50%);
bottom: 60px;
width: 90%;
padding: 0px 20px;
/*就算你要撑起来，你也只能往里面撑起来*/
box-sizing: border-box;
}
再用一下阿里巴巴的图标库
https://www.iconfont.cn/ 小俊会编码：..123123
下载好之后，将压缩包解压，将文件夹加入到项目assets目录下
在表单输入框当中使用
转载自CSDN-专业IT技术社区 版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 原文链接：https://blog.csdn.net/qq_60555957/article/details/127100669 |
【本文地址】
今日新闻 |
推荐新闻 |